<template>
  <dw-menu-datagrid-form
    ref="dictItemGridRef"
    :init-loaded="false"
    :columns="columns"
    v-model:activeFormData="formData"
    :data-grid-title="dataGridTitle"
    :render-form-title="renderFormTitle"
    :get-page-http-config="getPageHttpConfig"
    :del-info-http-config="delInfoHttpConfig"
    :del-list-http-config="delListHttpConfig"
    :get-info-http-config="getInfoHttpConfig"
    :add-info-http-config="addInfoHttpConfig"
    :update-info-http-config="updateInfoHttpConfig"
  >
    <template #dictItemColor="{ scope }">
      <el-tag v-if="scope.row.dictItemColor" :color="scope.row.dictItemColor" effect="dark" type="info" round>{{ scope.row.dictItemName }}</el-tag>
    </template>
    <template #formSlot>
      <table class="v-form-table">
        <tbody>
          <tr>
            <td class="dw-td-label"><span class="required">字典项名称</span></td>
            <td>
              <el-form-item
                prop="dictItemName"
                :rules="[
                  {
                    required: true,
                    message: '请填写字典项名称!',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input v-model="formData.dictItemName" placeholder="请输入字典项名称..."></el-input>
              </el-form-item>
            </td>
            <td class="dw-td-label"><span class="required">字典项值</span></td>
            <td>
              <el-form-item
                prop="dictItemValue"
                :rules="[
                  {
                    required: true,
                    message: '请填写字典项值!',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input v-model="formData.dictItemValue" placeholder="请输入字典项值..."></el-input>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="dw-td-label"><span>颜色</span></td>
            <td>
              <el-form-item
                prop="dictItemValue"
                :rules="[
                  {
                    required: true,
                    message: '请配置颜色...',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input v-model="formData.dictItemColor" placeholder="请配置颜色..." class="color-picker">
                  <template #append>
                    <el-color-picker v-model="formData.dictItemColor" />
                  </template>
                </el-input>
              </el-form-item>
            </td>
            <td class="dw-td-label"><span>排序号</span></td>
            <td>
              <el-form-item prop="sortNo">
                <el-input-number v-model="formData.sortNo"></el-input-number>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="dw-td-label">说明</td>
            <td :colspan="3">
              <el-form-item prop="dictItemMemo">
                <el-input type="textarea" v-model="formData.dictItemMemo"></el-input>
              </el-form-item>
            </td>
          </tr>
        </tbody>
      </table>
    </template>
  </dw-menu-datagrid-form>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { IDictItem } from '../dict';
import type { IAddInfoHttpConfig, IColumn, IDelInfoHttpConfig, IDelListHttpConfig, IGetInfoHttpConfig, IGetPageHttpConfig, IUpdateInfoHttpConfig } from '@/types/menu-datagrid-form';

defineOptions({
  name: 'DictItemFormGrid',
});

const dictItemGridRef = ref();
const dataGridTitle = '系统字典列表';
const formData = ref<IDictItem>({
  id: '',
  dictCode: '',
  dictItemName: '',
  dictItemValue: '',
  dictItemColor: '',
  dictItemMemo: '',
  sortNo: 1,
});
const renderFormTitle = (stateValue: 'add' | 'edit', data: IDictItem) => {
  if (stateValue === 'add') {
    return '系统字典信息';
  } else {
    return data.dictItemName;
  }
};
const columns = ref<IColumn[]>([
  {
    prop: 'dictItemName',
    label: '字典项名称',
    width: 200,
  },
  {
    prop: 'dictItemValue',
    label: '字典项值',
    align: 'left',
  },
  {
    prop: 'dictItemColor',
    label: '字典项颜色',
    align: 'center',
    width: 200,
    slotName: 'dictItemColor',
  },
  {
    prop: 'sortNo',
    label: '排序',
    align: 'right',
    width: 100,
  },
]);
const params = ref({
  dictCode: '',
  keyword: '',
});
const delInfoHttpConfig: IDelInfoHttpConfig = {
  url: '/admin-api/sys/dict/item/#{id}',
  delInfoMsgEmphasize: '#{dictItemName}',
};

const delListHttpConfig: IDelListHttpConfig = {
  url: '/admin-api/sys/dict/item/list',
};

const getPageHttpConfig: IGetPageHttpConfig<IDictItem> = {
  url: '/admin-api/sys/dict/item/page/list',
  query: () => {
    return { dictCode: params.value?.dictCode || '' };
  },
};

const getInfoHttpConfig: IGetInfoHttpConfig<IDictItem> = {
  url: '/admin-api/sys/dict/item/#{id}',
};

const addInfoHttpConfig: IAddInfoHttpConfig<IDictItem> = {
  url: '/admin-api/sys/dict/item',
};

const updateInfoHttpConfig: IUpdateInfoHttpConfig<IDictItem> = {
  url: '/admin-api/sys/dict/item',
};
const loadData = (dictCode: string) => {
  params.value.dictCode = dictCode;
  formData.value.dictCode = dictCode;
  dictItemGridRef.value.loadData();
};
defineExpose({ loadData });
</script>
<style lang="scss" scoped></style>
